<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="目录名称">
            <el-input v-model="formInline.directoryName"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="formInline.state" placeholder="请选择">
              <el-option label="启用" value="1">启用</el-option>
              <el-option label="禁用" value="0">禁用</el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="delSubmit">清除</el-button>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
          <div class="but">
            <el-button
            v-show="this.$route.query.id"
            class="right"
            type="text"
            icon="el-icon-back"
            @click="back()"
            >返回科学</el-button>
            <el-button
            type="success"
            class="el-icon-edit el-button--small"
            @click="addList"
            >新增目录</el-button>
          </div>
        </el-form>
        <!-- 表单下面的数据 -->
        <el-alert type="info" show-icon :title="`数据一共${amount}条`"></el-alert>
        <!-- 表格 -->
        <directory-from
          :table-data="tableData"
          @del="del"
          @rechange="addrechange"
        />

        <!-- 分页功能 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 20, 25]"
          :page-size="query.pagesize"
          layout="prev, pager, next, sizes,jumper"
          background
          :current-page="query.page"
          :total="amount"
        >
        </el-pagination>
        <!-- 新增弹框 -->
        <el-dialog
        v-if="dialogFormVisible"
          :title="isEdit ? '修改目录' : '添加目录'"
          width="400px"
          :visible.sync="dialogFormVisible"
        >
          <directorys-add :list-id="listId" :is-edit="isEdit" @close="close" />
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
// import { list as getCompanys } from '@/api/hmmm/companys'
// import { list as getQuestion } from '@/api/hmmm/questions'
import { contentList } from '@/api/hmmm/directorys'
import directoryFrom from './companys/directoryForm.vue'
import directorysAdd from '../components/directorys-add.vue'
export default {
  components: {
    directoryFrom,
    directorysAdd
  },
  data () {
    return {
      formInline: {},
      tableData: [], // 渲染页面
      query: {
        page: 1, // 页码
        pagesize: 10 // 每页条数
      },
      amount: 0, // 获取页面一共有多少列表项
      dialogFormVisible: false,
      listId: {}, // 点击文章Id
      isEdit: false // 判断是否是编辑或添加
    }
  },
  created () {
    // 跳转页面时将上个页面的值赋值给本页面请求对应数据
    this.query.subjectID = this.$route.query.id
    // this.query.directoryName = this.$route.query.name
    // console.log(this.$route.query)
    // console.log(this.$route.query.name)
    // getCompanys()
    // getQuestion()
    this.getList() // 渲染页面
  },
  methods: {
    // 弹框关闭以后，对表单进行重置
    // resetForm () {
    //   this.$refs.AddEmployee.resetForm()
    // },
    addrechange (data) {
      // 点击编辑显示弹窗
      this.dialogFormVisible = true
      // isEdit位true是编辑
      this.isEdit = true
      // 点击文章id
      this.listId = data
    },

    // 确认后弹窗
    close () {
      // 添加成功后关闭弹窗
      this.dialogFormVisible = false
      // 重新渲染页面数据
      this.getList()
    },

    // 新增目录
    addList () {
      this.isEdit = false
      this.dialogFormVisible = true
    },

    // 删除和禁用之后重新获取数据
    del () {
      this.getList()
    },

    // 搜索按钮
    async onSubmit () {
      const res = await contentList(this.formInline)
      // console.log(res)
      this.tableData = res.data.items
      // console.log(this.tableData)
      this.amount = res.data.counts
      this.formInline = {}
    },

    // 清除按钮
    delSubmit () {
      this.formInline = {}
      this.getList()
    },

    // 获取列表项
    async getList () {
      const res = await contentList(this.query)
      // console.log(res)
      this.tableData = res.data.items
      this.amount = res.data.counts
    },

    // 返回学科
    back () {
      this.$router.back()
    },

    handleSizeChange (newSize) {
      this.query.pagesize = newSize
      this.getList()
    },

    handleCurrentChange (newPage) {
      this.query.page = newPage
      this.getList()
    }
  }
  // import { list as getCompanys } from '@/api/hmmm/companys'
  // import { list as getQuestion } from '@/api/hmmm/questions'

// export default {
  // created () {
  //   this.getCompanys()
  //   // getQuestion()
  // },
  // methods: {
  //   async getCompanys () {
  //     const res = await getCompanys()
  //     console.log(res)
  //   }
  // }
}
</script>

<style scoped>
.el-button--small {
  position: absolute;
  right: 42px;
}
.but {
  display: inline-block;
}
.right{
  position: absolute;
  right: 160px;
}
</style>
